<template>
	<view class="container">
		<view class="navbar">
			<view class="navbar-back" @click="goBack">
				<text class="iconfont icon-back"></text>
			</view>
			<view class="navbar-title">发表评价</view>
			<view style="width: 24px;"></view>
		</view>
		
		<!-- 订单信息 -->
		<view class="order-info">
			<view class="photographer-info">
				<image :src="orderInfo.photographerAvatar" mode="aspectFill" class="photographer-avatar"></image>
				<view class="photographer-detail">
					<view class="photographer-name">{{orderInfo.photographerName}}</view>
					<view class="service-name">{{orderInfo.serviceName}}</view>
				</view>
			</view>
			<view class="order-time">拍摄时间：{{orderInfo.shootingTime}}</view>
		</view>
		
		<!-- 评分 -->
		<view class="review-section">
			<view class="section-title">整体评分</view>
			<view class="rating-container">
				<text 
					class="iconfont icon-star" 
					v-for="i in 5" 
					:key="i" 
					:class="{'active': i <= rating}"
					@click="setRating(i)"
				></text>
			</view>
			<view class="rating-text">{{ratingText[rating - 1]}}</view>
		</view>
		
		<!-- 评价内容 -->
		<view class="review-section">
			<view class="section-title">评价内容</view>
			<textarea 
				class="review-content" 
				v-model="content" 
				placeholder="请分享您的真实感受，帮助其他用户了解这位摄影师..." 
				maxlength="500"
			></textarea>
			<view class="word-count">{{content.length}}/500</view>
		</view>
		
		<!-- 上传照片 -->
		<view class="review-section">
			<view class="section-title">上传照片（可选）</view>
			<view class="upload-container">
				<view 
					class="photo-item" 
					v-for="(item, index) in photos" 
					:key="index"
				>
					<image :src="item" mode="aspectFill" class="photo-image"></image>
					<view class="delete-btn" @click="deletePhoto(index)">
						<text class="iconfont icon-close"></text>
					</view>
				</view>
				<view class="upload-btn" @click="choosePhoto" v-if="photos.length < 6">
					<text class="iconfont icon-camera"></text>
					<text class="upload-text">上传照片</text>
				</view>
			</view>
			<view class="upload-tip">最多可上传6张照片，每张不超过5MB</view>
		</view>
		
		<!-- 匿名选项 -->
		<view class="review-section">
			<view class="anonymous-option">
				<text>匿名评价</text>
				<switch :checked="isAnonymous" @change="toggleAnonymous" color="#07C160" />
			</view>
			<view class="option-tip">开启后，您的头像和昵称将不会显示</view>
		</view>
		
		<!-- 提交按钮 -->
		<view class="submit-container">
			<button 
				class="submit-btn" 
				:disabled="!isFormValid" 
				:class="{'disabled': !isFormValid}"
				@click="submitReview"
			>
				提交评价
			</button>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				orderId: null,
				orderInfo: {
					photographerName: '',
					photographerAvatar: '',
					serviceName: '',
					shootingTime: ''
				},
				rating: 5,
				ratingText: ['很差', '较差', '一般', '不错', '很棒'],
				content: '',
				photos: [],
				isAnonymous: false
			}
		},
		computed: {
			isFormValid() {
				return this.rating > 0 && this.content.trim().length >= 5;
			}
		},
		onLoad(options) {
			if (options.orderId) {
				this.orderId = options.orderId;
				this.loadOrderInfo();
			}
		},
		methods: {
			// 加载订单信息
			loadOrderInfo() {
				// 实际应用中，这里应该从服务器获取订单信息
				// 模拟数据
				uni.showLoading({
					title: '加载中...'
				});
				
				setTimeout(() => {
					uni.hideLoading();
					this.orderInfo = {
						photographerName: '王摄影工作室',
						photographerAvatar: 'https://randomuser.me/api/portraits/men/1.jpg',
						serviceName: '精品写真套餐',
						shootingTime: '2023-04-15 14:00'
					};
				}, 500);
			},
			
			// 返回上一页
			goBack() {
				uni.navigateBack();
			},
			
			// 设置评分
			setRating(value) {
				this.rating = value;
			},
			
			// 选择照片
			choosePhoto() {
				if (this.photos.length >= 6) {
					uni.showToast({
						title: '最多上传6张照片',
						icon: 'none'
					});
					return;
				}
				
				uni.chooseImage({
					count: 6 - this.photos.length,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						// 检查文件大小
						const validFiles = res.tempFiles.filter(file => file.size <= 5 * 1024 * 1024);
						if (validFiles.length < res.tempFiles.length) {
							uni.showToast({
								title: '部分照片超过5MB，已过滤',
								icon: 'none'
							});
						}
						
						// 添加照片
						const newPhotos = [...this.photos, ...res.tempFilePaths.slice(0, validFiles.length)];
						this.photos = newPhotos.slice(0, 6);
					}
				});
			},
			
			// 删除照片
			deletePhoto(index) {
				this.photos.splice(index, 1);
			},
			
			// 切换匿名状态
			toggleAnonymous(e) {
				this.isAnonymous = e.detail.value;
			},
			
			// 提交评价
			submitReview() {
				if (!this.isFormValid) {
					uni.showToast({
						title: '请填写评价内容（至少5个字）',
						icon: 'none'
					});
					return;
				}
				
				// 构建评价数据
				const reviewData = {
					orderId: this.orderId,
					rating: this.rating,
					content: this.content,
					photos: this.photos,
					isAnonymous: this.isAnonymous
				};
				
				console.log('提交评价:', reviewData);
				
				// 模拟提交评价
				uni.showLoading({
					title: '提交中...'
				});
				
				// 实际应用中，这里应该将图片上传到服务器并提交评价信息
				setTimeout(() => {
					uni.hideLoading();
					uni.showModal({
						title: '评价成功',
						content: '感谢您的评价！',
						showCancel: false,
						success: () => {
							// 返回订单页面并刷新
							uni.navigateBack({
								delta: 1,
								success: () => {
									// 刷新上一页数据
									const pages = getCurrentPages();
									const prevPage = pages[pages.length - 1];
									if (prevPage && prevPage.$vm) {
										// 如果是从订单详情页进入，刷新订单状态
										if (prevPage.route.includes('order_detail')) {
											prevPage.$vm.loadOrderDetail();
										} 
										// 如果是从订单列表页进入，刷新订单列表
										else if (prevPage.route.includes('my_orders')) {
											prevPage.$vm.loadOrders();
										}
									}
								}
							});
						}
					});
				}, 1500);
			}
		}
	}
</script>

<style lang="scss">
	/* 导入SCSS变量文件和共享样式 */
	@import '../../uni.scss';
	@import '../../common/styles.scss';
	
	// Define SCSS variables to prevent undefined variable errors
	$primary-color: #07C160;
	$secondary-color: #f8f8f8;
	$border-color: #eaeaea;
	$dark-text: #333333;
	$light-text: #999999;
	
	.container {
		background-color: #f5f5f5;
		min-height: 100vh;
		padding-bottom: 30px;
	}
	
	/* 导航栏 */
	.navbar {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 44px;
		background-color: white;
		position: sticky;
		top: 0;
		z-index: 1000;
		padding: 0 15px;
		border-bottom: 1px solid $border-color;
		/* #ifdef MP-WEIXIN */
		padding-top: var(--status-bar-height);
		height: calc(44px + var(--status-bar-height));
		/* #endif */
	}
	
	.navbar-title {
		font-size: 18px;
		font-weight: 500;
		text-align: center;
		flex: 1;
	}
	
	.navbar-back {
		width: 24px;
		height: 24px;
		display: flex;
		align-items: center;
	}
	
	/* 订单信息 */
	.order-info {
		background-color: white;
		padding: 15px;
		margin-bottom: 10px;
	}
	
	.photographer-info {
		display: flex;
		align-items: center;
		margin-bottom: 10px;
	}
	
	.photographer-avatar {
		width: 50px;
		height: 50px;
		border-radius: 25px;
		margin-right: 10px;
	}
	
	.photographer-name {
		font-weight: 500;
		font-size: 16px;
		margin-bottom: 3px;
	}
	
	.service-name {
		font-size: 14px;
		color: $light-text;
	}
	
	.order-time {
		font-size: 14px;
		color: $light-text;
	}
	
	/* 评价部分 */
	.review-section {
		background-color: white;
		padding: 15px;
		margin-bottom: 10px;
		position: relative;
	}
	
	.section-title {
		font-size: 15px;
		font-weight: 500;
		margin-bottom: 15px;
	}
	
	/* 评分 */
	.rating-container {
		display: flex;
		justify-content: center;
		margin-bottom: 10px;
	}
	
	.rating-container .iconfont {
		font-size: 40px;
		color: #ddd;
		margin: 0 5px;
	}
	
	.rating-container .iconfont.active {
		color: #ffc300;
	}
	
	.rating-text {
		text-align: center;
		font-size: 14px;
		color: $light-text;
	}
	
	/* 评价内容 */
	.review-content {
		width: 100%;
		height: 120px;
		border: 1px solid $border-color;
		border-radius: 8px;
		padding: 10px;
		font-size: 14px;
		box-sizing: border-box;
	}
	
	.word-count {
		text-align: right;
		font-size: 12px;
		color: $light-text;
		margin-top: 5px;
	}
	
	/* 上传照片 */
	.upload-container {
		display: flex;
		flex-wrap: wrap;
		margin: 0 -5px;
	}
	
	.photo-item, .upload-btn {
		width: calc(33.33% - 10px);
		margin: 0 5px 10px;
		aspect-ratio: 1;
		border-radius: 8px;
		overflow: hidden;
		position: relative;
	}
	
	.photo-image {
		width: 100%;
		height: 100%;
		object-fit: cover;
	}
	
	.delete-btn {
		position: absolute;
		top: 5px;
		right: 5px;
		width: 20px;
		height: 20px;
		background-color: rgba(0, 0, 0, 0.5);
		border-radius: 50%;
		display: flex;
		justify-content: center;
		align-items: center;
		color: white;
	}
	
	.delete-btn .iconfont {
		font-size: 14px;
	}
	
	.upload-btn {
		border: 1px dashed $border-color;
		background-color: #f9f9f9;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}
	
	.upload-btn .iconfont {
		font-size: 24px;
		color: $light-text;
		margin-bottom: 5px;
	}
	
	.upload-text {
		font-size: 12px;
		color: $light-text;
	}
	
	.upload-tip {
		font-size: 12px;
		color: $light-text;
		margin-top: 5px;
	}
	
	/* 匿名选项 */
	.anonymous-option {
		display: flex;
		justify-content: space-between;
		align-items: center;
		font-size: 15px;
	}
	
	.option-tip {
		font-size: 12px;
		color: $light-text;
		margin-top: 5px;
	}
	
	/* 提交按钮 */
	.submit-container {
		padding: 20px 15px;
	}
	
	.submit-btn {
		width: 100%;
		height: 45px;
		background-color: $primary-color;
		color: white;
		border-radius: 22.5px;
		font-size: 16px;
		font-weight: 500;
		line-height: 45px;
	}
	
	.submit-btn.disabled {
		background-color: #ccc;
	}
	
	/* iconfont */
	.icon-back:before {
		content: "\e679";
	}
	
	.icon-star:before {
		content: "\e62d";
	}
	
	.icon-camera:before {
		content: "\e663";
	}
	
	.icon-close:before {
		content: "\e69e";
	}
</style> 